<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('public.detail')"
    width="850px"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="1" label="基本信息">
        <el-descriptions
          v-loading="viewLoading"
          :column="2"
          border
          :label-width="140"
        >
          <el-descriptions-item width="200">
            <template #label>{{ $t('device.deviceSerialNumber') }}</template>
            {{ formData.sn || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('device.deviceName') }}</template>
            {{ formData.name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('device.deviceModel') }}</template>
            {{ formData.model || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>设备类型</template>
            <span>{{
              g_options.getOptionText(
                g_options.deviceTypeOptions,
                formData.type,
                '--'
              )
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>使用限制</template>
            {{ formData.limitCount || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>在线状态</template>
            <span
              class="dot-status"
              :class="
                g_options.getOptionText(
                  g_options.deviceOnlineOptions,
                  formData.online,
                  '--',
                  'class'
                )
              "
              >{{
                g_options.getOptionText(
                  g_options.deviceOnlineOptions,
                  formData.online,
                  '--'
                )
              }}</span
            >
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>工作状态</template>
            <span>{{
              g_options.getOptionText(
                deviceStatusOptions,
                formData.status,
                '--'
              )
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>绑定油烟机SN</template>
            {{ formData.bindOil || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>绑定电子称SN</template>
            {{ formData.bindElectronic || '--' }}
          </el-descriptions-item>
          <!-- <el-descriptions-item width="200">
            <template #label>绑定终端</template>
            {{ formData.sn || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>所在组</template>
            {{ formData.sn || '--' }}
          </el-descriptions-item> -->
          <el-descriptions-item width="200">
            <template #label>设备品牌</template>
            {{ formData.brand || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>归属租户</template>
            {{ formData.tenant || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('device.latestActivityTime') }}</template>
            {{ formData.activeTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>当前位置</template>
            {{ formData.address || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>主控版本号</template>
            {{ formData.masterVersion || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>主控版本生成时间</template>
            {{ formData.masterVersionTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件1版本号</template>
            {{ formData.firmware1Version || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件1版本生成时间</template>
            {{ formData.firmware1VersionTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件2版本号</template>
            {{ formData.firmware2Version || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件2版本生成时间</template>
            {{ formData.firmware2VersionTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件3版本号</template>
            {{ formData.firmware3Version || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件3版本生成时间</template>
            {{ formData.firmware3VersionTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件4版本号</template>
            {{ formData.firmware4Version || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>固件4版本生成时间</template>
            {{ formData.firmware4VersionTime || '--' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane name="2" label="外设详情">
        <BaseTable
          ref="refContentTable"
          v-loading="viewLoading"
          :data="tableData"
          row-key="ingredientCode"
          default-expand-all
        >
          <TableColumn
            prop="name"
            label="外设名称"
            :column-width="Math.max(columnWidthObj.name, 110)"
          />
          <TableColumn
            prop="tag"
            label="外设标签"
            :column-width="columnWidthObj.tag"
          />
          <TableColumn
            prop="driverId"
            label="外设驱动ID"
            :column-width="columnWidthObj.driverId"
          />
          <TableColumn
            prop="status"
            label="启用状态"
            :column-width="columnWidthObj.status"
          >
            <template #default="{ row }">
              <span
                v-if="row.status !== undefined"
                class="dot-status"
                :class="
                  g_options.getOptionText(
                    g_options.ingredientStatusOptions,
                    row.status,
                    '--',
                    'class'
                  )
                "
                >{{
                  g_options.getOptionText(
                    g_options.ingredientStatusOptions,
                    row.status,
                    '--'
                  )
                }}</span
              >
              <span v-else>--</span>
            </template>
          </TableColumn>
          <TableColumn
            prop="status"
            label="投放控制状态"
            :column-width="columnWidthObj.status"
          >
            <template #default="{ row }">
              <span
                v-if="row.status !== undefined"
                class="dot-status"
                :class="
                  g_options.getOptionText(
                    g_options.controlStatusOptions,
                    row.status,
                    '--',
                    'class'
                  )
                "
                >{{
                  g_options.getOptionText(
                    g_options.controlStatusOptions,
                    row.status,
                    '--'
                  )
                }}</span
              >
              <span v-else>--</span>
            </template>
          </TableColumn>
          <TableColumn
            prop="ingredientName"
            label="调料名称"
            :column-width="columnWidthObj.ingredientName"
          />
          <TableColumn
            prop="ingredientRemain"
            label="调料余量"
            :column-width="columnWidthObj.ingredientRemain"
          />
          <TableColumn
            prop="unit"
            label="投放单位"
            :column-width="columnWidthObj.unit"
          />
          <TableColumn
            prop="ratio"
            label="投放标准系数"
            :column-width="columnWidthObj.ratio"
          />
        </BaseTable>
      </el-tab-pane>
      <el-tab-pane name="3" label="工作时长">
        <h4 class="title" style="padding-bottom: 10px">
          设备【{{ formData.name }}】烹饪工作时长统计
        </h4>
        <BarChart
          v-if="activeName === '3'"
          :data="formData.stepList"
          :chart-data="chartData"
        />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import BarChart from './BarChart.vue'

const props = defineProps({
  sn: {
    type: String,
    default: ''
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const activeName = ref('1')
const viewLoading = ref(false)
const formData = ref({
  peripheralList: []
})
const deviceStatusOptions = ref([])
const refContentTable = ref(null)
const tableData = ref([])
const columnWidthObj = ref({})

watch(
  () => formData.value,
  (nv, ov) => {
    console.log('nv', nv)
    if (!nv.peripheralList?.length) return
    tableData.value = nv.peripheralList
    // 动态匹配每个设备的盒类数据
    // const list = g_.cloneDeep(nv.peripheralList || [])
    // 获取火力值
    // const firepowerObj = list.find(item => item.type === 6)
    // tableData.value.push(firepowerObj)
    // 获取锅铲
    // const spatulaObj = list.find(item => item.type === 7)
    // tableData.value.push(spatulaObj)
    // 获取食材盒和调料盒数据
    // const foodBoxList = list.filter(item => item.type === 1) || []
    // tableData.value.push({
    //   name: '食材盒',
    //   children: foodBoxList
    // })
    // const powderBoxList = list.filter(item => item.type === 2) || []
    // tableData.value.push({
    //   name: '粉料盒',
    //   children: powderBoxList
    // })
    // const materialBoxList = list.filter(item => item.type === 3) || []
    // tableData.value.push({
    //   name: '液料盒',
    //   children: materialBoxList
    // })
    // const sauceBoxList = list.filter(item => item.type === 4) || []
    // tableData.value.push({
    //   name: '酱料盒',
    //   children: sauceBoxList
    // })
    // const gourdBoxList = list.filter(item => item.type === 5) || []
    // tableData.value.push({
    //   name: '勾芡盒',
    //   children: gourdBoxList
    // })
    console.log('tableData.value', tableData.value)
    useTableColumnWidth({
      refTable: refContentTable.value
    }).getTableColumnWidth(data => {
      columnWidthObj.value = data
    })
  },
  {
    deep: true
  }
)

onMounted(() => {
  getDictDropList()
  getFormData()
})

const getDictDropList = _ => {
  g_api.recipe
    .apiDictDropList({
      dictType: 'device_work_status'
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        deviceStatusOptions.value = data
      }
    })
}

const getFormData = () => {
  viewLoading.value = true
  g_api.device
    .apiDeviceQueryDetail({ sn: props.sn })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const getIngredientUnit = row => {
  if ([1, 2, 4].includes(row.type)) {
    return '克/g'
  } else if ([3, 5].includes(row.type)) {
    return '毫升/ml'
  } else {
    return ''
  }
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.el-tabs {
  max-height: calc(100vh - 172px);
  :deep(.el-tabs__content) {
    overflow-y: auto;
  }
}
.title {
  margin: 0;
}
</style>
